// 1、值变量
//#region
@color: red;
@bgColor: pink;
@width: 50%;

.contents {
  background: @bgColor;
  color: @color;
  width: @width;
}

//#endregion

// 2、选择器变量 - 让选择器变成动态
//#region
@selected: #wrap;
@wrap: wrap;
@{selected} { //变量名 必须使用大括号包裹
  color: bisque;
  width: 80%;
}

.@{wrap} {
  color: #ccc;
}

#@{wrap} {
  color: #444;
}

//#endregion

// 3、属性变量 —— 可以减少代码书写量
//#region
@borderStyle: border-style;
@solid: solid;
.wrap {
    @{borderStyle}: @solid; //变量名 必须使用大括号包裹
}

//#endregion

// 4、url变量 —— 项目结构改变时，修改其变量即可
//#region
@images: "../../images"; // 需要加引号
body {
  background: url("@{images}/cat.jpg"); //变量名 必须使用大括号包裹
}

//#endregion

// 5、声明变量 类似
//#region
// 结构 —— @name:{属性:值}
// 使用 —— @name()
@background: {
  background: red
};

.div1 {
  @background();
}

@rules: {
  width: 200px;
  height: 200px;
  border: none;
}

.div2 {
  @rules();
}

//#endregion

// 6、变量运算
//#region
// 加减法时， 以第一个数据的单位为基准
// 乘除法时， 注意单位一定要统一
@width: 300px;
@color: #333;
.div3 {
  width: @width - 20;
  height: @width - 20 * 5;
  margin: (@width - 20) * 5;
  color: @color * 2;
  background-color: @color + #111;
}

//#endregion

// 7、变量作用域
//#region
// 就近原则
@var: @a;
@a: 100%;
.div4 {
  width: @var;
  @a: 9%;
}

//#endregion

// 8、用变量去定义变量
//#region
@name: "I am Lili";
@var1: "name";
#wrap::after {
  content: @@var1; // 将@var替换为其值 content:@fnord;
}

//#endregion